<template>
  <!-- 插槽:就是挖坑种什么填什么,可以访问数据、元素、组件,无法访问子组件的数据(要使用作用域插槽) -->
  <div>
    <h1>app组件</h1>

    <SlotCom>
      <!-- 具名插槽 -->
      <template #left>左边</template>
      <!-- 匿名插槽 -->
      <template #default>中间</template>
      <!-- 具名插槽 -->
      <template #right>右边</template>
    </SlotCom>

    <!-- 条件插槽 -->
    <SlotCom>
      <template #left> <span style="color: red">首页</span> </template>
      <template #right> <span style="color: green">游戏</span> </template>
    </SlotCom>

    <!-- 作用域插槽:想要使用父组件内或子组件内的数据,v-slot=''是默认作用域插槽 -->
    <SlotCom v-slot="slotProps">
      {{ `${slotProps.text} + ${slotProps.count}` }}
    </SlotCom>

    <!-- 具名作用域插槽(完整写法) -->
    <SlotCom>
      <template #default="slotProps">
        {{ `${slotProps.text} + ${slotProps.count}` }}
      </template>
      <!-- 具名作用域插槽 -->
      <template #right="slotProps">
        {{ slotProps.text }}
      </template>
    </SlotCom>
  </div>
</template>
 
<script setup>
import SlotCom from "./SlotCom.vue";
</script>

<style lang="scss" scoped>
</style>